<template>
    <view>	
		<view class="tab-bar">
			<cu-custom bgColor="bg-white" :isBack="true">
				<block slot="backText"></block>
				<block slot="content">导航切换2</block>
			</cu-custom>
		
			<!-- 切换条 -->
			<scroll-view class="scroll-h" :scroll-x="true" :show-scrollbar="false"  scroll-with-animation
			:scroll-into-view="scrollInto">
				<view v-for="(tab,index) in tabBars" :key="tab.id" class="uni-tab-item" :id="'index'+tab.id" :data-current="index"
				 @click="ontabtap">
					<text class="uni-tab-item-title" :class="tabIndex==index ? 'uni-tab-item-title-active' : ''">{{tab.name}}</text>
				</view>
			</scroll-view>
		</view>
		
	   <swiper class="box-ul" :current="tabIndex"  :duration="300" @change="ontabchange">
	       <swiper-item class="box-ul"  v-for="(tab,index1) in newsList" :key="index1">
				<scroll-view class="box-li" scroll-y="true" @scrolltolower="loadMore(index1)">
					
					<view class="list">
					<block v-for="(swiperDate2,index2) in 200" :key="index2">
							<view>数列{{index2}}	：{{newsList[tabIndex]}}</view>
					</block>
					</view>
					
				</scroll-view>
			</swiper-item>
	   </swiper>
	   
	     
    </view>
</template>


<script>
    export default {
        data() {
            return {
                tabIndex: 0,//切换条当前索引
                tabBars: [{
                    name: '关注',
                    id: '1'
                }, {
                    name: '推荐',
                    id: '2'
                }, {
                    name: '体育',
                    id: '3'
                },
				{
				    name: '关注',
				    id: '4'
				}, {
				    name: '推荐',
				    id: '5'
				}, {
				    name: '体育',
				    id: '6'
				},
				{
				    name: '关注',
				    id: '7'
				}, {
				    name: '推荐',
				    id: '8'
				}, {
				    name: '体育',
				    id: '9'
				},
				{
				    name: '关注',
				    id: '10'
				}, {
				    name: '推荐',
				    id: '11'
				}, {
				    name: '体育',
				    id: '12'
				}],
                scrollInto:"",//切换条跳转id
				newsList: [],//切换条显示的数据
            }
        },
		mounted() {
            setTimeout(()=>{
              this.tabBars.forEach((tabBar) => {
                  this.newsList.push({
                      data: [],
					  isLoading: false,
					  refreshText:0,
					  loadingText: '加载更多...'
                  });
              });
              this.getList(0);
            },350)
        },
        methods: {
			// 切换条开始
            getList(index) {
               console.log(index)
			   this.newsList[index].data=index
            },
			ontabchange(e){//活动切换
			    let index = e.target.current || e.detail.current;
			    this.switchTab(index);
			},
            ontabtap(e) {//点击切换
                let index = e.target.dataset.current || e.currentTarget.dataset.current;
                this.switchTab(index);
            },
            switchTab(index) {		
                if (this.newsList[index].data.length === 0) {
                    this.getList(index);
                }	
                if (this.tabIndex === index) {
                    return;
                }
                this.tabIndex = index;
                this.scrollInto = 'index'+this.tabBars[index].id;  	
            },
			loadMore: function(tabIndex) {
				console.log("下滑加载")
			}
			// 切换条结束
        }
    }
</script>


<style lang="less">
	.tab-bar {
		width: 100%;
		position: fixed;
		top:0;
		background-color: #FFFFFF;
		z-index: 10;
	}
	
	// 切换条开始
  .scroll-h {
	    background-color: #FFFFFF;
	  
        width: 750rpx;
		/* #ifdef H5 */
		width:100%;
		/* #endif */
		height: 80rpx;
        flex-direction: row;
        white-space: nowrap;
    }

    .uni-tab-item {
        display: inline-block;
        flex-wrap: nowrap;
        padding:0 22rpx;
    }

    .uni-tab-item-title {
        color: #555;
        font-size:28upx;
        height: 80rpx;
        line-height: 80rpx;
        flex-wrap: nowrap;
        white-space: nowrap;
    }
	.uni-tab-item-title-active {
		color: #F2B3A1;
		padding-bottom: 20upx;
		border-bottom: 4upx solid #F2B3A1;
	}
	// 切换条结束
	
	.box-ul{
		min-height: 100vh;//自适应高
		width: 100%;
		.box-li{
			/* swiper内容高度 */
			height: 100%;
			width: 100%;
		}
	}
	
	//list内容
	.list{
		padding:calc(var(--status-bar-height) + 200upx) 20upx 20upx;
	}
</style>
